<template>
  <div class="project">
    划片
    <div>
      <!-- 图片右滑验证 -->
      <div
        class="slideContainer_max"
        ref="slideContainer_max"
        v-show="isShowSlide"
      >
        <div class="slideContainer" v-show="isShowSlide" ref="slideContainer">
          <Huakuai2
            ref="slideblock"
            @success="onSuccess"
            @again="onAgain"
            @fulfilled="onFulfilled"
            @fail="onFail"
            @refresh="onRefresh"
            :slider-text="text"
            :imgs="imgs"
            :accuracy="accuracy"
          >
          </Huakuai2>
        </div>
      </div>
    </div>
    <!-- <Huakuai3/> -->
  </div>
</template>

<script>
import img0 from "@/assets/ii.png";
import img2 from "@/assets/54.jpg";
import Huakuai from "@/components/HuaKuai.vue";
import Huakuai2 from "@/components/HuaKuai2.vue";
import Huakuai3 from "@/components/HuaKuai3.vue";
export default {
  name: "demoOne",
  data() {
    return {
      msg: "",
      text: "向右滑动验证",
      imgs: [img0,img2],
      loginBtn: false,
      accuracy: 5, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      isShowSlide: true,
    };
  },
  methods: {
    onSuccess(times) {
      console.log('验证通过');
      this.loginBtn = true;
      this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    },
    onFail() {
      console.log('验证不通过');
      this.msg = "";
    },
    onRefresh() {
      console.log('点击了刷新小图标');
      this.msg = "";
    },
    onFulfilled() {
      console.log('刷新成功啦！');
    },
    onAgain() {
      console.log('检测到非人为操作的哦！');
      this.msg = "try again";
      // 刷新
      this.handleClick();
    },
    handleClick() {
      this.$refs.slideblock.reset();
      this.msg = "";
    },
  },
  components: { Huakuai, Huakuai2 ,Huakuai3},
};
</script>
<style scoped lang="less">
.project {
  .mask {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 499;
    overflow: hidden;
    background-color: rgba(218, 238, 255, 0.9);
  }
  .slideContainer {
    background: #fff;
    padding: 10px;
    z-index: 999;
  }
}
</style>
